<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true" fatherCss="box-shadow: none;">
			<block slot="backText"></block>
			<block slot="content"></block>
		</cu-custom>
		<view class="layer-bg" :style="[{top:CustomBar+'px'}]"></view>
		<view class="layer-content" :style="[{top:CustomBar+'px'}]">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Pay-to-complete.png" mode=""></image>
			<view class="">成功支付<text class="text-price text-white" style="margin-left: 10rpx;">{{price}}</text></view>
			<view class="" style="padding: 0 40rpx;text-align: center;">
				<!-- 积分免费兑， -->
				<text>点赞赢免单，分销得佣金</text>
				<text style="margin-top: 20rpx;">点击下面按钮，享受特权吧~</text>
			</view>
			<view class=""></view>
			<view class="">
				<view class="liner"></view>
				<view class="part1" style="flex-direction: row;align-items: center;">
					<text style="margin-top: 15rpx;color: #F34930;font-size: 28rpx;margin-right: 15rpx;"></text>
					<text style="font-weight: bold;font-size: 48rpx;" class="text-colorP">{{redPackMoneyShow}}</text>
				</view>
				<view class="part1">
					<view class="part-item">
						<text>消费时间：</text>
						<text>{{nowTime}}</text>
					</view>
					<view class="part-item">
						<text>收款店铺：</text>
						<text>{{busName}}</text>
					</view>
				</view>
			</view>
			<view class="use-btn" @click="nav" :data-url="'/pages/distributionCentre'">
				分销得佣金
			</view>
			<!-- <view class="use-btn" @click="showResult" data-status="down">
				积分免费兑
			</view> -->
			<view class="use-btn" v-if="isFif" @click="showResult" data-status="up">
				{{mode==2?'点赞赢免单':'助力领礼品'}}
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="bg-black-layer" :style="[{height: scrollH+'px'}]" v-if="resultShow">
			<view class="no-te-quan " :animation="animationResult">
				<view class="ewm">
					<image class="" :src="showImg" mode=""></image>
				</view>
				<view class="desc-text">
					{{descText}}
				</view>
				<view class="success-text">
					支付成功
				</view>
				<view class="desc">长按识别二维码，进入小程序</view>
			</view>
			<image class="close" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/close.png"
			 mode="" @click="hideResult"></image>
		</view>

		<!-- 红包 -->
		<view class="bg-black-layer" :style="[{height: scrollH+'px'}]" v-if="redPackShow">
			<view class="red-pack" :animation="animationRedPack" @click="openRedPack" v-if="!beOpen">
				<text>神秘红包</text>
				<text>1个</text>
			</view>

			<view class="red-pack-result" :animation="animationRedPackResult" v-if="beOpen">
				<view class="cont-top">
					<view class="first">
						<view>{{redPackTitle}}</view>
						<view>{{redPackDesc}}</view>
					</view>
					<view class="second">
						<view>{{redPackMoneyShow}}</view>
						<view :style="[{color: redPackSummary=='红包已直接发放入到【微信零钱】中'?'':'rgba(243,48,48,.5)'},{width: '400rpx'}]">{{redPackSummary}}<text
							 v-if="redPackSummary=='千种商品纯积分商品兑换'" class="go-button" @click="goMall">立即兑换</text></view>
					</view>
				</view>
				<view class="cont-bottom">
					<view class="shi_bie" v-if="!isMeng && !isConduct" style="margin-top: 35rpx">
						<image src="https://zshang.oss-cn-shenzhen.aliyuncs.com/resources/person-ewm.png" mode=""></image>
						<text>长按识别二维码，打开小程序</text>
					</view>
					<view style="margin: 45rpx auto" v-if="!isMeng && isConduct">
						<scroll-view scroll-y scroll-with-animation="true">
							<view class="swiper-container" :style="[{height: swiperHeight}]">
								<view class='swiper-item swiper-item-new' v-for="(item,index) in shopList" :key="index" @click="nav" :data-url="item.url?item.url:'/pages/generalDetail?busId='+item.id">
									<view class="coom">
										<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden.png" v-if="item.isOne" mode=""
										 class="h_g"></image>
										<view>
											<text class="text-cut">{{item.name}}</text>
											<text>分享得奖励</text>
											<text v-if="isFif" @tap.stop="showResult" data-status="up">参与免单活动</text>
										</view>
										<view class="add new-add">
											<view class="">
												<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
												<view class="text-cut">
													{{item.address}}
												</view>
											</view>
											<view class="c_address">
												{{item.distance}}
											</view>
										</view>
										<view class="content-inte" v-if="item.product_data.length>0">
											<scroll-view scroll-x scroll-with-animation="true">
												<view class="inte">
													<view class='inte-item' v-for="(goods,index) in item.product_data" :key="index">
														<view class="coon" :style="goods.style">
															<image :src="goods.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
															<view class="">
																<text class="text-price text-colorP" v-if="goods.price>0">{{goods.price}}</text>
																<text class="text-colorP" v-if="goods.integral>0 && goods.price>0">+</text>
																<text class="text-colorP" v-if="goods.integral>0">{{goods.integral}}</text>
																<text class="text-colorP" v-if="goods.integral>0">积分</text>
															</view>
														</view>
													</view>
												</view>
											</scroll-view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="is-meng" v-if="isMeng">
						<view class="tit">
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-font.png" mode=""></image>
							为您推荐附近优质商家
						</view>
						<view class="banner-content" v-if="!isConduct">
							<scroll-view scroll-y scroll-with-animation="true">
								<view class="swiper-container" :style="[{height: swiperHeight}]">
									<view class='swiper-item' style="height: 200rpx;" v-for="(item,index) in shopList" :key="index" @click="nav"
									 :data-url="'/pages/generalDetail?busId='+item.id">
										<image class="shops-img" :src="item.shop_image" mode=""></image>
										<view class="coom" style="height: 160rpx;">
											<view>
												<text class="text-cut">{{item.name}}</text>
												<text>积分换购</text>
											</view>
											<view class="">
												<view class="">
													<text>已售{{item.consume_number}}</text>
													<text>{{item.industry_name}}</text>
												</view>
												<view class="c_address">
													{{item.distance}}
												</view>
											</view>
											<view class="tags">
												<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
											</view>
											<view class="add">
												<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
												<view class="text-cut">
													{{item.address}}
												</view>
											</view>
										</view>
										<view class="posit" v-if="index<3">
											<text>NO.</text>
											<text>{{index+1}}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="" v-if="isConduct">
							<scroll-view scroll-y scroll-with-animation="true">
								<view class="swiper-container" :style="[{height: swiperHeight}]">
									<view class='swiper-item swiper-item-new' v-for="(item,index) in shopList" :key="index" @click="nav" :data-url="item.url?item.url:'/pages/generalDetail?busId='+item.id">
										<view class="coom">
											<view>
												<text class="text-cut">{{item.name}}</text>
												<text v-if="index>0">积分换购</text>
												<text>分享得奖励</text>
												<text v-if="isFif && index==0" @tap.stop="showResult" data-status="up">参与免单活动</text>
											</view>
											<view class="add new-add">
												<view class="">
													<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
													<view class="text-cut">
														{{item.address}}
													</view>
												</view>
												<view class="c_address">
													{{item.distance}}
												</view>
											</view>
											<view class="content-inte" v-if="item.product_data.length>0">
												<scroll-view scroll-x scroll-with-animation="true">
													<view class="inte">
														<view class='inte-item' v-for="(goods,index) in item.product_data" :key="index">
															<view class="coon" :style="goods.style">
																<image :src="goods.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
																<view class="">
																	<text class="text-price text-colorP" v-if="goods.price>0">{{goods.price}}</text>
																	<text class="text-colorP" v-if="goods.integral>0 && goods.price>0">+</text>
																	<text class="text-colorP" v-if="goods.integral>0">{{goods.integral}}</text>
																	<text class="text-colorP" v-if="goods.integral>0">积分</text>
																</view>
															</view>
														</view>
													</view>
												</scroll-view>
											</view>
											<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden.png" v-if="item.isOne" mode=""
											 class="h_g"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<image class="close" v-if="beOpen" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/close.png"
			 mode="" @click="hideRedPack"></image>
		</view>
		<!-- <view class="positon-music" @click="truthPlay">
			<image :class="isPlay?'active':''" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/music.png" mode=""></image>
		</view> -->

		<!-- <image class="guang-gao" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-banner.png?x-oss-process=image/resize,m_fill,h_200,w_700" -->
		<!-- @click="nav" data-url="/pages/distributionCentre" mode=""></image> -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="width: 100%;margin: 20rpx 0 0;">
			<official-account @binderror="binderror"></official-account>
			<view class="" style="font-size: 26rpx;color: #999;line-height: 60rpx;padding: 0 20rpx;">
				关注环球掌商公众号，获取一手资讯及通知。
			</view>
		</view>
		<!-- #endif -->
		<view class="shops-show-all">
			<view class="tit" v-if="isMeng">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-font.png" mode=""></image>
				为您推荐附近优质商家
			</view>
			<view class="tit" v-if="!isMeng">
				商家商城
			</view>
			<view class="swiper-container">
				<view class='swiper-item swiper-item-new' v-for="(item,index) in shopList" :key="index" @click="nav" :data-url="item.url?item.url:'/pages/generalDetail?busId='+item.id">
					<view class="coom">
						<view>
							<text class="text-cut">{{item.name}}</text>
							<text v-if="index>0">积分换购</text>
							<text>分享得奖励</text>
							<text v-if="isFif && index==0" @tap.stop="showResult" data-status="up">参与免单活动</text>
						</view>
						<view class="add new-add">
							<view class="">
								<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
								<view class="text-cut">
									{{item.address}}
								</view>
							</view>
							<view class="c_address">
								{{item.distance}}
							</view>
						</view>
						<view class="content-inte" v-if="item.product_data.length>0">
							<scroll-view scroll-x scroll-with-animation="true">
								<view class="inte">
									<view class='inte-item' v-for="(goods,index) in item.product_data" :key="index">
										<view class="coon" :style="goods.style">
											<image :src="goods.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
											<view class="">
												<text class="text-price text-colorP" v-if="goods.price>0">{{goods.price}}</text>
												<text class="text-colorP" v-if="goods.integral>0 && goods.price>0">+</text>
												<text class="text-colorP" v-if="goods.integral>0">{{goods.integral}}</text>
												<text class="text-colorP" v-if="goods.integral>0">积分</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden.png" v-if="item.isOne" mode="" class="h_g"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFormatDate
	} from '@/utils/formatDate.js'
	import tuiIcon from "@/components/thorUI/icon.vue";
	export default {
		components: {
			tuiIcon
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				busName: '',
				price: '',
				scord: '',
				scrollH: '',
				windowSize: '',
				fifDownImg: 'https://zshang.oss-cn-shenzhen.aliyuncs.com/resources/pay-scard.png',
				fifUpImg: 'https://zshang.oss-cn-shenzhen.aliyuncs.com/resources/pay-order.png',
				showImg: '',
				// 15元以上为true
				isFif: false,
				resultShow: false,
				descText: '',
				redPackShow: false,
				animationRedPack: {},
				// 红包结果
				animationRedPackResult: {},
				beOpen: false,
				redPackMoney: 0,
				// 支付类型
				payType: '',
				orderId: '',
				nowTime: '',
				isMeng: false,
				busId: '',
				shopList: [],
				swiperHeight: '',
				isPlay: true,
				innerAudioContext: '',
				// 更新于10/30
				redPackTitle: '',
				redPackDesc: '',
				redPackMoneyShow: '',
				redPackSummary: '',
				isConduct: false,
				mode: ''
			}
		},
		onLoad(options) {
			// options.busName = '实惠便利店'
			// options.price = '50'
			// options.payType = 'offline'
			// options.orderId = '2861'
			// options.busId = '1'
			// options.mode = 1


			this.busName = options.busName
			this.price = Number(options.price)
			this.scord = Math.floor(options.price)
			this.payType = options.payType
			this.orderId = options.orderId
			this.busId = options.busId
			this.mode = options.mode
			// 判断是否显示助力按钮
			if ((this.mode == 1 && Number(this.price) > 15) || this.mode == 2) {
				this.isFif = true
			}
			// 获取当前时间
			this.nowTime = getFormatDate()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
					this.windowSize = res
				}
			})
			// 生成红包
			this.setRedPacket()
			// 是否是连锁
			this.checkLian()
		},
		methods: {
			binderror(res) {
				console.log(res)
			},
			truthPlay() {
				if (this.isPlay) {
					this.innerAudioContext.pause()
					this.isPlay = false
				} else {
					this.innerAudioContext.play()
					this.isPlay = true
				}
			},
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (!uni.getStorageSync('coordinate') && url == '/pages/distributionCentre') {
					uni.getLocation({
						type: 'wgs84',
						success: map => {
							var coordinate = {
								"latitude": map.latitude,
								"longitude": map.longitude
							}
							uni.setStorageSync('coordinate', coordinate)
							if (url) {
								uni.navigateTo({
									url: url
								})
							}
						},
						fail: (e) => {
							uni.navigateTo({
								url: '/pages/selectCity?currentCity=西安市'
							})
						}
					});
					return
				}
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			// 二维码弹窗
			showResult(e) {
				var that = this
				var status = e.currentTarget.dataset.status
				if (status == 'down') {
					this.showImg = this.fifDownImg
					this.descText = '您的积分已收入囊中，快去兑换吧~'
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + that.busId
					})
					return
					// #endif
				} else {
					this.showImg = this.fifUpImg
					this.descText = '您已获得助力免费礼包，快去领取~'
					// #ifdef MP-WEIXIN
					if (that.mode == 2) {
						uni.navigateTo({
							url: '/pages/newCheating?orderId=' + that.orderId
						})
					} else {
						uni.navigateTo({
							url: '/pages/cheatingDetail?payType=offline&orderId=' + that.orderId
						})
					}
					return
					// #endif
				}
				that.resultShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.scale(1.1).step()
				setTimeout(function() {
					animation.scale(1).step()
					that.animationResult = animation.export()
				}.bind(that), 300)
			},
			hideResult() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					this.animationResult = animation.export()
					this.resultShow = false
				}.bind(this), 300)
			},
			// 红包
			redPackShowClick(e) {
				var that = this
				that.redPackShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.scale(1.1).step()
				setTimeout(function() {
					animation.scale(1).step()
					this.animationRedPack = animation.export()
				}.bind(this), 300)
			},
			hideRedPack() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					this.animationRedPack = animation.export()
					this.animationRedPackResult = animation.export()
					this.redPackShow = false
				}.bind(this), 300)
			},
			checkLian() {
				var that = this
				that.$request({
					url: '/ChainShop/get_chain_shop_by_bid',
					data: {
						business_id: that.busId,
					},
					success: res => {
						if (res.data.status == 1) {
							// 是否属于盟
							that.isMeng = res.data.data.flag
							// that.isMeng = false
							// 是否属于围场县试点区域
							// that.isConduct = res.data.data.wc_flag
							that.isConduct = true
							if (that.isMeng) {
								var bList = res.data.data.b_list
								if (that.isConduct) {
									bList[0].isOne = true
									var noList = bList.filter(item => item.id != that.busId)
									var hasList = bList.filter(item => item.id == that.busId)
									bList = hasList.concat(noList)
								}
								bList[0].url = `/pages/generalDetail?busId=${bList[0].id}&orderId=${that.orderId}`
								that.shopList = bList
								if (that.shopList.length > 2) {
									that.swiperHeight = '500rpx'
								} else {
									that.swiperHeight = 220 * that.shopList.length + 'rpx'
								}
							} else {
								if (that.isConduct) {
									var bList = res.data.data.b_list
									var hasList = bList.filter(item => item.id == that.busId)
									hasList[0].url = `/pages/generalDetail?busId=${bList[0].id}&orderId=${that.orderId}`
									that.shopList = hasList
									that.swiperHeight = 220 * that.shopList.length + 50 + 'rpx'
								}
							}

						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setRedPacket() {
				var that = this
				var payType = this.payType
				if (payType == 'offline') {
					that.$request({
						url: '/RedPacket/send_red_packet',
						data: {
							order_id: that.orderId,
						},
						success: res => {
							if (res.data.status == 1) {
								var result = res.data.data.data
								that.redPackMoney = result.red_money
								// 判断是否中奖
								// if (result.red_money && result.red_money > 0) {
								that.redPackTitle = '中奖啦'
								that.redPackDesc = '恭喜获得现金红包'
								// 积分：' + that.scord
								that.redPackMoneyShow = '红包：' + result.red_money + '元'
								that.redPackSummary = '红包已直接发放入到【微信零钱】中'
								// } else {
								// 	that.redPackTitle = '中奖啦'
								// 	that.redPackDesc = '恭喜获得积分红包'
								// 	that.redPackMoneyShow = '积分：' + that.scord
								// 	that.redPackSummary = '千种商品纯积分商品兑换'
								// }
								// 有红白打开红包
								that.redPackShowClick()
							}
							uni.hideLoading()
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					that.$request({
						url: '/RedPacket/send_red_packet_online',
						data: {
							order_id: that.orderId,
						},
						success: res => {
							if (res.data.status == 1) {
								// 有红白打开红包
								that.redPackShowClick()
							}
							uni.hideLoading()
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			goMall() {
				uni.switchTab({
					url: '/pages/tabBar/scordMall'
				})
			},
			openRedPack() {
				var that = this
				var payType = this.payType
				if (payType == 'offline') {
					this.$request({
						url: '/RedPacket/send_money',
						data: {
							order_id: that.orderId,
						},
						success: res => {
							var result = res.data.data
							// that.beOpen = true
							// var animation = uni.createAnimation({
							// 	duration: 500,
							// 	timingFunction: 'ease',
							// })
							// animation.scale(1.1).step()
							// setTimeout(function() {
							// 	animation.scale(1).step()
							// 	that.animationRedPackResult = animation.export()
							// }.bind(that), 300)
							that.hideRedPack()
							uni.hideLoading()
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.$request({
						url: '/RedPacket/sendMoneyNewOnline',
						data: {
							order_id: that.orderId,
						},
						success: res => {
							var result = res.data.data
							if (result.money > 0) {
								this.beOpen = true
							}
							that.redPackMoney = result.money
							var animation = uni.createAnimation({
								duration: 500,
								timingFunction: 'ease',
							})
							animation.scale(1.1).step()
							setTimeout(function() {
								animation.scale(1).step()
								that.animationRedPackResult = animation.export()
							}.bind(that), 300)
							uni.hideLoading()
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.positon-music {
		position: absolute;
		top: 150rpx;
		right: 20rpx;
		border: solid 1rpx #efefef;
		background: rgba(0, 0, 0, .5);
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
	}

	.positon-music .active {
		animation: rotate 3s linear infinite;
	}

	.positon-music image {
		width: 50%;
		height: 50%;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

	.banner-content {
		box-sizing: border-box;
		position: relative;
	}

	.swiper-container {
		width: 100%;
		text-align: left;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.swiper-container .swiper-item {
		/* display: inline-block; */
		width: 700rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		position: relative;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: inherit;
		border: solid 1rpx #efefef;
		border-radius: 10rpx;
	}

	.swiper-container .swiper-item .posit {
		position: absolute;
		top: 0rpx;
		left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40rpx;
		height: 56rpx;
		/* box-shadow: 1rpx 4rpx 8rpx 0rpx rgba(165, 20, 14, 0.5); */
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-rank-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.swiper-container .swiper-item .posit>text:nth-child(1) {
		font-size: 20rpx;
		color: #ffffff;
	}

	.swiper-container .swiper-item .posit>text:nth-child(2) {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.swiper-container .swiper-item .shops-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}



	.swiper-container .swiper-item-new .coom {
		justify-content: flex-start !important;
	}

	.swiper-container .swiper-item-new .coom>view:nth-child(1)>text:nth-child(1) {
		max-width: 300rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.swiper-container .swiper-item .coom {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.swiper-container .swiper-item .coom>view:nth-child(1) {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.swiper-container .swiper-item-new .coom>view:nth-child(1) text:nth-child(1) {
		max-width: 185rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-bottom: 0 !important;
	}

	.swiper-container .swiper-item .coom>view:nth-child(1) text:nth-child(2) {
		display: inline-block;
		width: 115rpx;
		height: 30rpx;
		background-image: linear-gradient(90deg,
			#f8990b 0%,
			#f23e14 100%);
		border-radius: 2rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		line-height: 30rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}

	.swiper-container .swiper-item .coom>view:nth-child(1) text:nth-child(3) {
		display: inline-block;
		/* width: 115rpx; */
		height: 30rpx;
		background-image: linear-gradient(90deg,
			#f8990b 0%,
			#f23e14 100%);
		border-radius: 2rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 4rpx;
		padding: 0 10rpx;
	}

	.swiper-container .swiper-item .coom>view:nth-child(2) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.swiper-container .swiper-item .coom>view:nth-child(2)>view:nth-child(1) text {
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.swiper-container .swiper-item .coom>view:nth-child(2)>view:nth-child(1) text:nth-child(1) {
		margin-right: 20rpx;
	}

	.swiper-container .swiper-item .coom>view:nth-child(2) .c_address {
		font-size: 24rpx;
		color: #666666;
	}

	.swiper-container .swiper-item .coom .tags {
		display: flex;
		align-items: center;
	}

	.swiper-container .swiper-item .coom .tags text {
		padding: 0 15rpx;
		background: rgba(243, 73, 48, .1);
		border-radius: 4rpx;
		line-height: 32rpx;
		font-size: 20rpx;
		color: #f34930;
		margin-right: 10rpx;
	}

	.swiper-container .swiper-item .coom .add {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}

	.swiper-container .swiper-item .coom .new-add {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.swiper-container .swiper-item-new .coom .new-add>view:nth-child(1) {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.swiper-container .swiper-item-new .coom .new-add>view:nth-child(1)>view:nth-child(1) {
		margin-right: 15rpx;
	}

	.swiper-container .swiper-item-new .coom .new-add>view:nth-child(1)>view:nth-child(2) {
		line-height: 30rpx;
		font-size: 24rpx;
		color: #666666;
		max-width: 280rpx;
	}

	.swiper-container .swiper-item .coom .add>view:nth-child(1) {
		margin-right: 15rpx;
	}

	.swiper-container .swiper-item .coom .add>view:nth-child(2) {
		/* flex: 1; */
		line-height: 30rpx;
		font-size: 24rpx;
		color: #666666;
		max-width: 280rpx;
	}

	.shi_bie {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
	}

	.shi_bie image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		margin-bottom: 20rpx;
	}

	.shi_bie text {
		font-size: 26rpx;
		color: #fff;
	}

	/* .swiper-container .swiper-item .coom>view:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
	} */

	.container {
		width: 100%;
		position: relative;
		/* padding-bottom: 20rpx; */
	}

	.is-meng {
		margin: 0 auto !important;
		width: 100% !important;
	}

	.tit {
		width: 100%;
		height: 34rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #fff;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		padding: 0 24rpx;
	}

	.tit image {
		width: 112rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.layer-bg {
		width: 750rpx;
		height: 360rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #f34930;
	}

	.layer-content {
		width: 750rpx;
		/* position: absolute;
		top: 0;
		left: 0;
		z-index: 2; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.layer-content>image:nth-child(1) {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx 0;
	}

	.layer-content>view:nth-child(2) {
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		color: #ffffff;
	}

	.layer-content>view:nth-child(3) {
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 17px;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.layer-content>view:nth-child(4) {
		width: 702rpx;
		height: 16rpx;
		background-color: #e03319;
		border-radius: 8rpx;
	}

	.layer-content>view:nth-child(5) {
		width: 662rpx;
		height: 300rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(223, 51, 25, 0.2);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		background: #fff;
		margin-top: -8rpx;
		position: relative;
	}

	.layer-content>view:nth-child(5) .liner {
		position: absolute;
		top: 0;
		left: 0;
		width: 662rpx;
		height: 30rpx;
		background-image: linear-gradient(to bottom, rgba(224, 51, 25, .5), #fff);
	}

	.layer-content>view:nth-child(5) .part1 {
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		display: flex;
		/* align-items: center; */
		justify-content: center;
		flex-direction: column;
	}

	.layer-content>view:nth-child(5) .part1:nth-child(2) {
		border-bottom: dashed 1rpx #efefef;
	}

	.layer-content>view:nth-child(5) .part1:nth-child(3) {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		justify-content: space-between;
	}

	.layer-content>view:nth-child(5) .part1:nth-child(3) .part-item text:nth-child(1) {
		font-size: 28rpx;
		color: #666666;
	}

	.layer-content>view:nth-child(5) .part1:nth-child(3) .part-item text:nth-child(2) {
		font-size: 28rpx;
		color: #333333;
	}

	.use-btn {
		width: 560rpx;
		height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
	}

	.layer-content>view:nth-child(6) {
		background-color: #f34930;
		margin-top: 20rpx;
		color: #fff;
	}

	.layer-content>view:nth-child(7) {
		margin-top: 20rpx;
		/* background-color: #f34930; */

		border: solid 1rpx #f34930;
		color: #f34930;
	}

	.layer-content>view:nth-child(8) {
		margin-top: 20rpx;
		border: solid 1rpx #f34930;
		background-color: #f34930;
		color: #fff;
	}

	.bg-black-layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: borde-box;
		z-index: 1025;
	}

	/* 无特权卡 */
	.no-te-quan {
		display: flex;
		/* justify-content: space-between; */
		flex-direction: column;
		align-items: center;
		background: #fff;
		width: 560rpx;
		height: 718rpx;
		border-radius: 20rpx;
		padding: 210rpx 0 0;
		box-sizing: border-box;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/gift-box-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.no-te-quan .desc-text {
		color: #F34930;
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}

	.no-te-quan .success-text {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1px;
		color: #fff;

		margin-bottom: 20rpx
	}

	.no-te-quan .ewm {
		width: 240rpx;
		height: 240rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
	}

	.no-te-quan .ewm>image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 16rpx;
	}

	.no-te-quan .desc {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #fff;
	}


	.close {
		width: 50rpx;
		height: 112rpx;
		margin-top: 30rpx
	}

	/* 红包 */
	.red-pack {
		display: flex;
		flex-direction: column;
		background: #fff;
		width: 560rpx;
		height: 718rpx;
		border-radius: 20rpx;
		padding: 120rpx 0 0;
		box-sizing: border-box;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-open-envelope-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	/* 红包拆开结果 */
	.red-pack-result {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		padding-top: 40rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.red-pack-result .cont-top {
		width: 100%;
		height: 315rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-bg1.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 0 5rpx;
	}

	.red-pack-result .cont-top .first {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.red-pack-result .cont-top .first>view:nth-child(1) {
		font-size: 36rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #f8d299;
		font-weight: bold;
	}

	.red-pack-result .cont-top .first>view:nth-child(2) {
		font-size: 36rpx;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		color: #f6da85;
		font-weight: bold;
		margin-top: 23rpx
	}

	.red-pack-result .cont-top .second {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.red-pack-result .cont-top .second>view:nth-child(1) {
		font-size: 48rpx;
		line-height: 58rpx;
		letter-spacing: 4rpx;
		color: #f33030;
		font-weight: bold;
	}

	.red-pack-result .cont-top .second .go-button {
		display: inline-block;
		padding: 0 10rpx;
		line-height: 32rpx;
		color: #F34930;
		font-size: 20rpx;
		/* background-image: linear-gradient(90deg, #f8990b 0%, #f23e14 100%); */
		border-radius: 8rpx;
		margin-left: 10rpx;
		border: solid 1rpx #F34930;
		text-align: center;
	}

	.red-pack-result .cont-top .second>view:nth-child(2) {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #999999;
		margin-top: 10rpx;
		text-align: center;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.red-pack-result .cont-bottom {
		width: 100%;
		padding-top: 38rpx;
		background: linear-gradient(to bottom, #fa473c, #f34930);
		border-radius: 0 0 28rpx 28rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top: -2rpx;
		flex: 1;
	}

	.red-pack text {
		font-size: 48rpx;
		line-height: 58rpx;
		letter-spacing: 4rpx;
		color: #ffe63c;
		text-align: center;

	}

	.content-inte {
		background: #fff;
		box-sizing: border-box;
		position: relative;
		margin-top: 20rpx
	}

	.inte {
		width: 480rpx;
		white-space: nowrap;
	}

	.h_g {
		position: absolute;
		top: -25rpx;
		left: -1px;
		width: 50rpx;
		height: 50rpx;
		-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		transform: rotate(-20deg);

	}


	.inte .inte-item {
		display: inline-block;
		width: 180rpx;
		height: 120rpx;
		position: relative;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.inte .inte-item .coon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		box-sizing: border-box;
	}

	.inte .inte-item .coon image {
		width: 180rpx;
		height: 120rpx;
		background-color: #414141;
		border-radius: 8rpx;
	}

	.inte .inte-item .coon>view {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .5);
		border-radius: 0 0 8rpx 8rpx;
	}

	.inte .inte-item .coon>view>text {
		font-size: 20rpx;
		line-height: 30rpx;
		color: #ffffff;
	}


	.guang-gao {
		width: 700rpx;
		height: 200rpx;
		display: block;
		/* position: fixed;
		bottom: 10rpx;
		left: 50%;
		margin-left: -350rpx; */
		margin: 20rpx auto;
	}

	.shops-show-all {
		width: 100%;
		background: #F34930;
		overflow: hidden;
		padding-bottom: 20rpx;
		border-radius: 8rpx 8rpx 0 0;
		margin-top: 20rpx;
	}
</style>
